<template>
<div class="car-container">
    <div class="cartinfo">
        <div class="mui-card" v-for="(item,i) in shoplist" :key="item.id">
		<div class="mui-card-content">
            <div class="mui-card-content-inner">
                <mt-switch v-model="$store.getters.getshopselected[item.id]" @change="selectedChanged(item.id,$store.getters.getshopselected[item.id])"></mt-switch>
                <img src="https://i1.mifile.cn/f/i/g/2015/TV4-75.png?width=60&height=60" alt="">
                <div class="info">
                    <h4>小米电视4 75英寸</h4>
                    <div class="zujian">
                        <span class="price">{{item.price}}</span>
                        <numbox :initcount="$store.getters.getcartcount[item.id]" :shopid="item.id"></numbox>
                        <a href="#" @click.prevent="removeshop(item.id,i)">删除</a>
                    </div>
                </div>
            </div>
		</div>
	</div>
    </div>
    <div class="buyinfo">
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div class="left">      
                        <p>总计(不含运费)</p>
                        <p>已勾选商品<span>{{ $store.getters.getshopcountAndamount.count }}</span>件，总价<span>{{ $store.getters.getshopcountAndamount.amount }}</span></p>
                    </div>
                    <mt-button type="danger">结算</mt-button>
                </div>
            </div>
        </div>
    </div> 
</div>
</template>

<script>
import numbox from './subcomponent/shopcar-numbox.vue'
export default {
    data(){
        return {
            value:true,
            shoplist:[]
        }
    }, 
    methods:{
        getShopList(){
            //获取store中商品Id
            // var idArr = []
            this.shoplist = this.$store.state.cartcount
            // this.$store.getters.getcartcount[item.id]
            console.log(this.$store.getters.getcartcount)
        },
        removeshop(id,i){
            this.shoplist.splice(i,1)
            this.$store.commit('removeshop',id)
        },
        selectedChanged(id,value){
            // console.log(id+'---'+value)
            this.$store.commit('updatecartselected',{id:id,selected:value})

        }
    },
    created(){
        this.getShopList()
    },
    components:{
        numbox
    }
}
</script>

<style lang="less" scoped>
.car-container{
    background-color: #eeeeee;
    overflow: hidden;
    .cartinfo{
        .mui-card{
            .mui-card-content-inner{
                
                display: flex;
                align-items: center;
            }
            img{
                width: 50px;
                height: 60px;
            }
            h4{
                font-size: 13px;
            }
            .info{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 100%;
                .price{
                    color: red;
                }
            }
        }
    }
    .buyinfo{
        .mui-card-content-inner{
            display: flex;
            justify-content: space-around;
            align-items: center;
            span{
                color: red;
                margin: 0 3px;
                font-weight: bold;
            }
        }
    }
}
</style>